<template>
    <p>混合api写法</p>
    <p>ref</p>
    <p>count : {{count}}</p>
    <p>test : {{test}}</p>

    <p>reactive======</p>
    <p>obj:{{obj}}</p>
    <p>obj.name:{{obj.name}}</p>
    <p>obj.age:{{obj.age}}</p>
    <p>arr:{{arr}}</p>
    <p>arr[0]:{{arr[0]}}</p>
    <p>obarrj[1]:{{arr[1]}}</p>
    <p>computed======</p>
    <p>countAddFive:{{countAddFive}}</p>
    <p>objAgeAddFive:{{objAgeAddFive}}</p>

    <p>methods</p>
    <button @click="countAddOne">count + 1</button>
    <button @click="countAddTwo">count + 2</button>
    <button @click="updateObj">更新obj</button>

    <p>组件</p>
    <Son :foo="obj.name" :age="obj.age" />
</template>

<script setup>
    import {ref , reactive ,computed,watch} from 'vue'
    import Son from './Son.vue'

    const count = ref(0)
    const test = ref ('hello world')

    console.log(count);

    //reactive
    const obj = reactive({
        name: 'tom',
        age:12
    })

    const arr = reactive([1,2,3,4])

    console.log(obj.name);
    console.log(obj.age);

    //computed
    const countAddFive = computed(() => {
        return count.value + 20
    })
    const objAgeAddFive = computed(() => {
        return obj.age + 15
    })
    //methods
    function countAddOne() {
        count.value++
    }
    const countAddTwo = () => {
        count.value += 2
    }
    const updateObj = () => {
        updateObjName()
    }
    const updateObjName = () => {
        obj.name = 'jerry'
    }
    //watch
    watch(count,(newVal,oldVal) => {
        console.log('count改变了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })
    
    watch(countAddFive,(newVal,oldVal) => {
        console.log('countAddFive改变了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })

    watch(obj,(newVal,oldVal) => {
        console.log('obj改变了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })

    watch(() => obj.name,(newVal,oldVal) => {
        console.log('obj.name改变了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })
</script>
